<template>
  <div id="start-page">
    <h1>开始新的试题</h1>
    <br />
    <question-set></question-set>

    <v-button class="add-new" @click="showModal">添加新的试题集</v-button>

    <v-modal
      :width="375"
      okText="添加"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <v-row>
        <v-col span="24"><h2>添加新的试题集</h2></v-col>
      </v-row>
      <br />
      <v-row :gutter="16">
        <v-col class="gutter-row" span="12">
          <v-input
            placeholder="题集名"
            v-model="value"
            @blur="blur('blur')"
          ></v-input>
        </v-col>
        <v-col class="gutter-row" span="12">
          <v-upload :name="name" :action="action" @change="onChange">
            <v-button type="ghost">
              <v-icon type="upload"></v-icon> 点击上传
            </v-button>
          </v-upload>
        </v-col>
      </v-row>
      <br />
      <v-row>
        <v-col span="24"><h3>选择题目对应的MD标题等级</h3></v-col>
      </v-row>
      <br />
      <v-row :gutter="16">
        <v-col class="gutter-row" span="24">
          <v-radio-group
            type="button"
            size="large"
            v-model="bRadio1"
            class="heading-levels-group"
            :data="[
              { value: '1', text: '1' },
              { value: '2', text: '2' },
              { value: '3', text: '3' },
              { value: '4', text: '4' },
              { value: '5', text: '5' },
              { value: '6', text: '6' },
            ]"
          >
          </v-radio-group>
        </v-col>
      </v-row>
    </v-modal>
  </div>
</template>

<script>
import QuestionSet from '../../components/QuestionSet/QuestionSet.vue';

export default {
  data() {
    return {
      visible: false,
      name: 'file',
      action: '/upload',
      bRadio1: 'a',
      value: '',
    };
  },
  methods: {
    //模态框
    showModal() {
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
      this.$router.push('/home/set-page');
    },
    handleCancel() {
      this.visible = false;
    },

    // 输入框
    blur(val) {
      console.log(val);
    },
    keyup(val) {
      console.log(val);
    },
    keydown(val) {
      console.log(val);
    },

    //上传事件
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        console.log(info.file.name + ' 上传成功.');
      } else if (info.file.status === 'error') {
        console.log(info.file.name + ' 上传失败.');
      }
    },
  },
  components: {
    QuestionSet,
  },
};
</script>

<style lang="scss" scoped>
#start-page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .add-new {
    margin: 20px 0;
  }
  .heading-levels-group ::v-deep {
    display: flex;
    justify-content: space-between;
    align-content: center;
    .ant-radio-button-wrapper {
      border: 1px solid #bbbbbb;
      border-radius: 4px;
    }

    .ant-radio-button-wrapper-checked {
      color: #fff;
      background-color: #108ee9;
      box-shadow: 0px 0 1px 1px rgba($color: #108ee9, $alpha: 0.5);
    }
  }
}
</style>
